<template>
	<view class="content">
		<view class="group">
			<view class="list">
				<view class="list_name">手机号码</view>
				<view class="list_fr">{{replaceStr(userInfo.phone,3,4)}}
					<!-- <input type="text" class="listInput" placeholder="请输入真实姓名" v-model="userInfo.phone" disabled/> -->
				</view>
			</view>
			<view class="list">
				<view class="list_name">验证手机</view>
				<view class="list_code">
					<view class="reg_fl">
						<input type="number" placeholder="请输入验证码" class="input_code" placeholder-class="place"  v-model="code" />
					</view>
					<view class="reg_fr">
						<button class="phone_code " @tap="getCode" :disabled="disabled">{{timeText}}</button>
					</view>
					
				</view>
			</view>
			<view class="list">
				<view class="list_name">支付密码</view>
				<view class="list_fr">
					<input type="password" class="listInput" placeholder="请输入支付密码(6位数字)" v-model="password" placeholder-class="pladler"/>
				</view>
			</view>
			<view class="list">
				<view class="list_name">支付密码</view>
				<view class="list_fr">
					<input type="password" class="listInput" placeholder="再次输入支付密码(6位数字)" v-model="newpassword" placeholder-class="pladler"/>
				</view>
			</view>
			
			
		</view>
		
		<view class="bottom">
			<view class="submit" @click="getSave">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password:'',
				code:'',
				disabled:false,
				timeText:'获取验证码',
				countdown:60,
				userInfo:{},
				newpassword:''
			}
		},
		onLoad() {
			let userInfo = JSON.parse(uni.getStorageSync(this.constant.StorageName.APP_USER_INFO));
			 this.userInfo = userInfo
		},
		methods: {
			// 倒计时
			setTime:function(){
				var that = this;
				var time = that.countdown;
				if(time == 0){
					that.timeText = "获取验证码";
					that.disabled = false;
					time = 60; 
					that.countdown = time;
					return
				}else{
					that.disabled = true
					var timea = time-1;
					//console.log(timea)
					that.countdown = timea
					that.timeText = '等待'+'('+timea+')秒';
				}
				setTimeout(function(){
					that.setTime()
				},1000)
			},
			// 获取验证码
			getCode: function () {
				let that = this;
				that.api.getVerifyCode({
					phone: that.userInfo.phone,
					type:'bind'
				}).then(res => {
					that.tui.toast(res.msg)
					that.setTime();
				})
			},
			// 保存
			getSave: function () {
				let that = this;
				if (that.code == '') {
					that.tui.toast('请输入验证码')
					return
				} else if (that.password == '') {
					that.tui.toast('请输入支付密码')
					return
				} else if (that.newpassword == '') {
					that.tui.toast('再次输入支付密码')
					return
				} else if (that.password != that.newpassword) {
					that.tui.toast('两次支付密码不一致')
					return
				}
				that.api.userSetpayPassword({
					code:that.code,
					payPassword:that.password
				}).then(res => {
					console.log(res,"-")
					that.tui.toast(res.data)
					setTimeout(function () {
						that.cacheHelper.updateUserInfo()
						uni.$emit('login',{msg: '用户信息更新'})
					},500)
					setTimeout(function () {
						uni.navigateBack({
							delta: 1
						});
					},1500)
				})
				
				
				
				
			}
			
			
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #212121;
		font-family: 'PingFang SC';
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.bindtip {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		background: #F5F5F5;
		font-size: 26rpx;
		color: #E42221;
	}
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list_fl {
				width: 200rpx;
				box-sizing: border-box;
				line-height: 80rpx;
			}
			.list_fr {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				.pladler {
					font-size: 30rpx;
					color: #666666;
				}
				.listInput {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
			.list_code {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.reg_fr {
					width: 195rpx;
					box-sizing: border-box;
					margin: 0;
					.phone_code {
						width: 100%;
						font-size: 30rpx;
						height: 70rpx;
						line-height: 70rpx;
						color: #E42221;
						background: none;
						padding: 0;
					}
				}
				.reg_fl {
					width: calc(100% - 195rpx);
					box-sizing: border-box;
					padding-right: 5rpx;
					.input {
						width: 100%;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 36rpx;
					}
					.place {
						font-size: 30rpx;
						color: #999999;
					}
				}
			}
			.list_image {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				.upload {
					width: 140rpx;
					height: 140rpx;
				}
			}
			
		}
		
	}
	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 30rpx 50rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 66;
		.submit {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #E42221;
			border-radius: 8rpx;
			line-height: 94rpx;
		}
	}

</style>
